<template>
  <div class="containsClass">
    <div class="bodyClass">
      <div>
        <img
          class="backClass"
          @click="goBack"
          src="@/assets/login/fanhui.svg"
        />
        <div class="titleClass">设置视标参数</div>
        <div class="boxClass">
          <div>
            <a-form :form="form">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="屏幕物理宽度"
              >
                <a-input v-model="sizeValue" size="large">
                  <div slot="suffix">MM</div>
                </a-input>
                <img
                  class="yiwenClass"
                  @click="show"
                  src="@/assets/images/yiwen.svg"
                />
              </a-form-item>
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="屏幕分辨率"
              >
                <a-input v-model="showResolution" readOnly size="large" />
                <div class="tipsClass">请使用电脑推荐分辨率</div>
              </a-form-item>
            </a-form>
            <div class="btn">
              <a-button @click="submit" type="primary" class="btnClass"
                >保存</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      class="modalClass"
      title="屏幕物理宽度说明"
      :visible="modalVisible"
      @cancel="modalVisible = false"
      cancelText=""
      :footer="null"
      :maskClosable="false"
      :width="450"
    >
      <div class="fontClass">
        为了准确测量您的屏幕宽度，请使用毫米刻度的直尺或卷尺，<span
          style="color: red"
          >测量屏幕可视区域的最左边到最右边的距离，不包括边框</span
        >。记录下这个距离作为屏幕的物理宽度<span style="color: red"
          >(单位为毫米)</span
        >。
      </div>
    </a-modal>
  </div>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 14 },
};
import { notification } from "ant-design-vue";
export default {
  data() {
    return {
      modalVisible: false,
      formItemLayout,
      showResolution: "",
      resolution: "",
      screenHeight: "",
      size: "4.5",
      width: "",
      sizeValue: "",
      loginForm: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  created() {
    var screenWidth = window.screen.width * window.devicePixelRatio;
    var screenHeight = window.screen.height * window.devicePixelRatio;
    this.showResolution = screenWidth + "*" + screenHeight;
    console.log(screenWidth, "screenWidth");
    console.log(screenHeight, "screenHeight");
    console.log(this.showResolution, "this.showResolution");
    this.resolution = screenWidth;
    this.screenHeight = screenHeight;

    let sizeValue = localStorage.getItem("sizeValue");
    if (sizeValue) {
      this.sizeValue = sizeValue;
    }
  },
  methods: {
    show() {
      this.modalVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    submit() {
      if (!this.sizeValue) {
        return notification.error({
          message: "温馨提示",
          description: "屏幕物理宽度不能为空",
        });
      }
      this.setting();
    },
    setting() {
      let userInfo = JSON.parse(sessionStorage.getItem("myUserInfo"));
      let values = {
        userId: userInfo.uid,
        screenWidth: Number(this.sizeValue),
        screenResolution: this.resolution + "*" + this.screenHeight,
        distance: 5,
        loginKey: userInfo.loginKey,
        uid: userInfo.uid,
      };
      this.$POST("/pad/setUserPadResolutionParameter", values).then(
        (res) => {}
      ); //1.视力

      localStorage.setItem("sizeValue", this.sizeValue);
      localStorage.setItem("resolution", this.resolution);
      localStorage.setItem("screenHeight", this.screenHeight);
      localStorage.setItem("distance", 5);
      notification.success({
        message: "温馨提示",
        description: "视标参数保存成功",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.containsClass {
  width: 30vw;
  height: 100%;
  .bodyClass {
    width: 100%;
    min-height: 100%;
    background-size: cover; /* 图片覆盖整个容器 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-image: url("~@/assets/login/beijingtu_a.png");
    margin: 0 auto;
    padding-top: 0.2rem;
    font-weight: bold;
    position: relative;
    & > div {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      /deep/.ant-input-affix-wrapper .ant-input:not(:last-child) {
        padding-right: 50px;
      }
      /deep/.ant-input {
        text-align: end !important;
        font-weight: bold;
      }
      /deep/.ant-form-item-label > label {
        color: #6387b5 !important;
        font-weight: bold !important;
        font-size: 18px;
      }
      /deep/.ant-select-selection-selected-value {
        float: right !important;
      }
      .backClass {
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        width: 0.25rem;
        height: 0.25rem;
      }
      .szClass {
        position: absolute;
        cursor: pointer;
        right: 0;
        top: 0;
        width: 0.25rem;
        height: 0.25rem;
      }
      .titleClass {
        text-align: center;
        font-size: 0.16rem;
        color: #0f6c80;
        margin-bottom: 0.15rem;
      }
      .boxClass {
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0.06rem;
        padding: 0.1rem;
        position: relative;
        .yiwenClass {
          width: 0.15rem;
          height: 0.15rem;
          position: absolute;
          margin-left: 0.05rem;
          cursor: pointer;
          top: calc(50% - 0.075rem);
        }
        .imgClass {
          min-height: 1.2rem;
          width: 100%;
          border: 1px solid rgb(228, 228, 228);
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0.05rem 0;
        }
        .tipsClass {
          color: #0078d7;
          float: right;
          font-size: 0.07rem;
          height: 0.1rem;
          line-height: 0.1rem;
          margin-top: 0.02rem;
        }
        .tipClass {
          margin-top: 0.12rem;
          color: #eb5e15;
          font-size: 0.1rem;
          line-height: 0.13rem;
        }
        .btn {
          margin: 0 auto;
          margin-top: 0.1rem;
          width: 55%;
        }
        .btnClass {
          width: 100%;
          height: 0.3rem;
          font-size: 0.12rem;
          letter-spacing: 0.03rem;
          text-indent: 0.03rem;
          color: #fff;
          border-radius: 0.05rem;
        }
      }
    }
  }
}
.modalClass {
  /deep/.ant-btn {
    display: none;
  }
  /deep/.ant-btn-primary {
    display: inline-block;
  }
  .fontClass {
    font-size: 0.08rem;
    font-weight: bold;
    text-indent: 0.16rem;
  }
}
.showClass {
  /deep/.ant-input {
    border: 1px solid transparent !important;
  }
}
</style>